<template>
	<view class="warp">
		<view>
		  	<image :src="loginbg" style="width:100%;height:300rpx"></image>
		</view>
		<view class="login">  
			<view class="itemView">
				<view style="height:60upx;font-size:16px;font-weight: bold;">姓名</view>
				<input class="input" name="nickName" v-model='userInfo.nickName' placeholder="请输入用户名" placeholder-style="color:#9f9d9e;"/>
			</view>
		   <view class="itemView">
				<view style="height:60upx;font-size:16px;font-weight: bold;">手机号</view>
				<input class="input" name="username" v-model='userInfo.username' placeholder="请输入手机号" placeholder-style="color:#9f9d9e;"/>
			</view>
		  <view class="itemView">
				  <view style="height:60upx;font-size:16px;font-weight: bold;">密码</view>
					<input  class="input" v-model='userInfo.password' :password='isPassword' placeholder="请输入密码" placeholder-style="color:#9f9d9e;"/>
				</view>
			<view class="itemView">
				  <view style="height:60upx;font-size:16px;font-weight: bold;">再次确认密码</view>
					<input  class="input" v-model='repassword' :password='isPassword' placeholder="请输入密码" placeholder-style="color:#9f9d9e;"/>
				</view>
			</view>
		    <view class="logbtn">
		      <text class="logbtnt" @click="userResister">注册</text>
		    </view>
			<view class="zbcss">
				<view style="display:flex;"> 
					<u-icon name="checkmark-circle" color="#1e8550"></u-icon>注册即表示同意
					  <text class="regbtnt">隐私权声明</text>
				</view>
			</view>
		  </view>
	</view>
</template>

<script>
	import Config from '@/util/index.js'
	import {
	 resisterUser
	} from '@/api/user'
	export default{
		data(){
			return {
				gtYear:'',
				nickName:'',
				syearArr:[],
				schoolname:'',
				password:'',
				username:'',
				repassword:'',
				option1:[],
				goodsCate:[],
				isPassword:true,
				showDialog:false,
				showSyearDialog:false,
				cardID:'',
				scode:'',
				loginbg:'',
				current: 0,
				userInfo:{
					nickName: "",
					password: "",
					username: "",
				},
				radiolist1: [{
					value: "0",
					name:'女',
				  },
					{
					  value: "1",
					  name:'男',
					  checked: true
					}
				],
				rules:{
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.tel': {
						type: 'string',
						required: true,
						message: '请填写电话',
						trigger: ['blur', 'change']
					},
					'userInfo.loginid': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change']
					}
				}
			}
		},
		onLoad(options){
			let currDate = new Date()
			const Y = currDate.getFullYear()
			let syears = []
			let fiveYearbefore = new Date(Y-5).getTime()
			for(var i=0;i<=5;i++){
			  syears.push(fiveYearbefore+i)
			}
			this.syearArr=syears
			this.cardID=options.cardid
			this.loginbg = this.picUrl + "loginbg.png"
		},
		methods:{
			onChangeState(evt) {
				// this.gstate = event.detail
				for (let i = 0; i < this.radiolist1.length; i++) {
					if (this.radiolist[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}
				this.model1.userInfo.sex = this.current
			},
			changeTel(val){
				this.model1.userInfo.userName = val
			},
			showPopup(){
			    let type = []
			    this.option1.map(item =>{
			      type.push(item.text)
			    })
			    this.goodsCate=type
			    this.showDialog=true
			  },
			  showYearPopup(){
			    this.showSyearDialog=true
			  },
			  onClose(){
			    this.showDialog=false
			  },
			  onYearClose(){
			    this.showSyearDialog=false
			  },
			  checkLoginName(loginName){
			    var exp = /^[a-zA-z]\w{3,15}$/;
			    if(!exp.test(loginName)) {
			      return false;
			    } else {
			      return true;
			    }
			  },
			  checkCardVal: function (val) {
			    const exp = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
			    if (!exp.test(val)) {
			      return false
			    } else {
			      return true
			    }
			  },
			  checkTelFormat(val){
			    const exp = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
			    if (!exp.test(val)) {
			      return false
			    }else{
			      return true
			    }
			  },
			  checkNameFormat(val){
			    const exp = /^(?!.*[【】\(\)\[\]]).{2,12}$/;
			    if (!exp.test(val)) {
			      return false
			    }else{
			      return true
			    }
			  },
			  checkPwdFormat(val){
			    const exp = /^(?!.*[【】\(\)\[\]]).{6,20}$/;
			    if (!exp.test(val)) {
			      return false
			    }else{
			      return true
			    }
			  },
			  onConfrim(e){
			    const index  = e.detail.index;
			    this.scode = this.data.option1[index].value,
			    this.schoolname=this.data.option1[index].text
			    this.onClose()
			  },
			  onYearConfrim(e){
			    const value  = e.index;
			    this.model1.userInfo.syear=value
			    this.onYearClose()
			  },
			  userResister(){
			    //校验表单
			    if(this.userInfo.nickName==""){
			      uni.showToast({
			        title:"姓名不能为空",
			        icon: 'none',
			        duration: 2000
			      });
			      return false
			    }else{
					let isok = this.checkNameFormat(this.userInfo.nickName) 
					if(!isok){
					  uni.showToast({
					    title:"姓名长度要求2-12个字符",
					    icon: 'none',
					    duration: 2000
					  });
					  return false
					}
				}
				if(this.userInfo.username==""){
				  uni.showToast({
				    title:"手机号不能为空",
				    icon: 'none',
				    duration: 2000
				  });
				  return false
				}else{
			      let isok = this.checkTelFormat(this.userInfo.username)
			      if(!isok){
			        uni.showModal({
			          content: '请输入正确的手机号',
			          showCancel: true,
			        })
			        return false
			      }
			    }
			    if(this.userInfo.password==""){
			      uni.showToast({
			        title:"密码不能为空",
			        icon: 'none',
			        duration: 2000
			      });
			      return false
			    }else{
					let isok = this.checkPwdFormat(this.userInfo.password)
					if(!isok){
					  uni.showToast({
					    title:"密码长度要求6-20个字符",
					    icon: 'none',
					    duration: 2000
					  });
					  return false
					}
				}
				if(this.userInfo.password != this.repassword){
					uni.showToast({
					  title:"两次输入密码不一致",
					  icon: 'none',
					  duration: 2000
					});
					return false
				}
			      let _this = this
			   
				 uni.setStorage({
				 	key: 'regusername',
				 	data: this.userInfo.username
				 });
				 console.log("this.userInfo3366",this.userInfo)
			    resisterUser(this.userInfo).catch(res=> {
			        if(res.data.code == 200){
						 uni.setStorageSync('createBy',this.userInfo.username)
			          uni.redirectTo({
			            url: "../../login/index",
			          })
					  uni.showToast({
					    title:"注册成功",
					    icon: 'success',
					    duration: 2000
					  });			 
			        }else{
			          uni.showToast({
			            title:res.data.msg,
			            icon: 'none',
			            duration: 2000
			          });
			        }
			    })
			}
		}
	}
</script>

<style>
	.editbtn{margin-top:60upx}
	.login{padding:10upx 20upx 10upx;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;}
	.userdom{margin-top:1rem;}
	.itemView{line-height:100rpx;margin-top:20rpx;border-bottom:1px solid #9f9d9e;}
	.itemView input{width:100%;height:100rpx;line-height:100rpx;}
	.pwdImage{width:50rpx;height:50rpx}
	.pwdImage image{width:50rpx;height:50rpx}
	.logradio{margin-top:40rpx;color:#ffffff;display: flex;align-items: center;}
	.logbtn{width:96%;margin:40upx auto 0upx;}
	.regbtnt{color:#1e8550;text-align: center}
	.logbtnt{width:100%;background:#1e8550;height:80rpx;line-height:80rpx;font-size:1.2rem;color:#ffffff;text-align: center;border-radius: 10px;display:block;margin-top:30rpx}
	.zbcss{width:70%;text-align: center;color:#000;margin:10rpx auto 0rpx}
</style>
